<template>
    <div class="xiazai">
        <div class="top">
            <router-link to="/my"><p><</p></router-link> 
            <h2>下载记录</h2>
        </div>
        <ul class="download-list">
         <li v-for="downloadedImage in downloadedImages" :key="downloadedImage">
           <img :src="downloadedImage" alt="下载的图片">
           <button @click="deleteImage(downloadedImage)">X</button>
         </li>
       </ul>
    </div>
</template>
<style lang="less" scoped>
@import '../../common/less/varible.less';

.xiazai {
    width: 100%;
   .top{
        height: 40px;
        width: 100%;
        position: relative;
        p{
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 30px;
        }
        h2{
            position: absolute;
            top: 15px;
            left: 40px;
        }
    }
    ul{
        display: flex;
        flex-wrap: wrap; 
        width: 100%;
        li{
            width: 50%; 
            position: relative;
            img{
                width: 80%;
                margin: 30px auto;
                border-radius: 10px;
            }
            button{
                position: absolute;
                right: 16px;
                top: 28px;
                height: 40px;
                width: 40px;
                font-size: 26px;
                background-color: rgb(255, 255, 255);
                border: transparent;
                border-radius: 50%;
                color:rgb(0, 0, 0);
               
            }
        }
    }
}
</style>
<script>
import { ref } from 'vue';

export default {
  name: 'DownloadRecord',
  setup() {
    const downloadedImages = ref([]);
    const loadDownloadedImages = () => {
      const keys = Object.keys(localStorage);
      downloadedImages.value = keys
      .filter(key => localStorage.getItem(key) === 'downloaded')
      .map(key => key);
    };
    loadDownloadedImages();

    const deleteImage = (imageUrl) => {
      localStorage.removeItem(imageUrl);
      downloadedImages.value = downloadedImages.value.filter(img => img!== imageUrl);
    };
    return {
      downloadedImages,
      deleteImage,
    };
  },
};
</script>